<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的主页</title>
    <link rel="shortcut icon" href="image/favicon.ico" type="image/x-icon">
    <style>
        /* 背景全屏显示 */
        *{
            margin: 0px;padding: 0px;
        }
        body{  
            background:url("image/1.jpeg") no-repeat center center fixed;
            background-size:cover;
        }
        html,body,#waimian{
            width: 100%;
            height: 100%;
        }
        /* 百度logo设置 */
        .baidu img{
            width: 300px;
            height: 100px;
            margin-bottom: 10px;
            margin-left: 100px
        }
        .baidu{
            width: 500px;
            height: 130px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 150px;
        }
        #txt{
            padding-left:5px;
            color:white;
            border: 1px solid #FDFFFA;
            border:1;
            width: 500px;
            height: 28px;
            font-size: 16px;
            background: transparent;
        }
        #card article{
            float: left;
        }
        #card{
            margin-left: auto;
            margin-right: auto;
        }
        article{
            width:200px;
            height:40px;
            border: 1px solid #000;
            background-color: transparent;
            /* 背景透明 */
            /* margin: 100px -150px 0 0;
            transform: perspective(900px) rotateY(60deg); */
            box-shadow: 2px 2px 4px #999999;
            /* 阴影设置 */
            /* transition: all 0.5s; */
            opacity: 0.9;
            /* 设置透明度 */
            padding-left:5px ;
            padding-right: 5px;
            margin: 10px;
        }
        img{
            width:100px;
            float: left;
            padding-left: 20px;
            padding-right: 20px;
        }
        p{
            /* padding: 10px; */
            text-indent:2em;
            /* 首行缩进 */
            font-size: 12px;
        }
        #card article:hover{
            /* transform: perspective(0) rotateY(0deg);
            margin: 100px -30px 0 100px; */
            box-shadow: 4px 4px 10px #fff
        }
        .q233{
            margin-left: auto;
            margin-right: auto;
            margin-top: 100px;
        }
        article img{
            width: 140px;
            height: 100px;
        }
        article p{
            font-size: 20px;
            font-family: 阿朱泡泡体,微软雅黑,楷体;
            color:#fff;
            margin:6px 20px 5px 10px;
        }
        #login{
            display: block;color: #666;
            text-decoration: none;
            font-size: 16px;
        }
        ul li{
            list-style-type: none;
            float: right;
            text-align: center;
            line-height: 16px;
            padding-left:4px ;
            padding-right: 4px;
            margin-top: 10px;
        }
        #login:hover{
            color:red;
        }
    </style>
</head>
<body>
    <div style="width: 100%;height: 10px;">
        <ul>
            <li style="margin-right: 50px;"><a id="login" href="form/form-login.html">注册</a></li>
            <li>
                |
            </li>
            <li><a id="login" href="form/index.html">登录</a></li>
        </ul>
    </div>
    <div id="waimian"> 
        <div class="baidu"> 
            <img  src="image/5.png" alt="">
            <form action="http://www.baidu.com/baidu" target="_blank">
                <input id="txt" type="text" name="word"  placeholder="回车进行搜索" autofocus="autofocus" >
                <!-- name是百度服务器识别的搜索信息，必须为word -->
                <input type="submit" value="搜索"style="opacity: 0;cursor: pointer;" >
            </form>
            <div class="q233">
                <div id="card">
                    <a href="https://www.bilibili.com/" target="_blank">
                        <article>
                            <p>bilibili</p>
                         </article></a>
                    <a href="https://ziyouziti.com/index-index-list-type-1.html?page=2" target="_blank">
                        <article>
                            <p>字体白嫖网</p>
                        </article>
                    </a>
                    <a href="https://www.pexels.com/" target="_blank">
                        <article>
                            <p>图片白嫖网</p>
                        </article>
                    </a>
                    <a href="https://texturehaven.com/" target="_blank">
                        <article>
                            <p>纹理白嫖网</p>
                        </article>
                    </a>
                    <a href="https://www.cc0textures.com/" target="_blank">
                        <article>
                            <p>材质白嫖网</p>
                        </article>
                    </a>
                    <a href="http://www.5nj.com/" target="_blank">
                        <article>
                            <p>电影白嫖网</p>
                        </article>
                    </a>
                    <a href="https://www.100chui.com/index" target="_blank">
                        <article>
                            <p>简历白嫖网</p>
                        </article>
                    </a>
                    <a href="https://unity.cn/" target="_blank">
                        <article>
                            <p>unity官网</p>
                    </article>
                    </a>
                    <a href="https://www.csdn.net/" target="_blank">
                        <article>
                            <p>CSDN官网</p>
                    </article>
                    </a>
                    
                    <a href="https://www.zhihu.com/" target="_blank">
                        <article>
                            <p>知乎官网</p>
                    </article>
                    </a>
                </div>
    </div>

</body>
</html>